<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >职称搜索</el-button
          >
          <el-button
            @click="isShow1 = !isShow1"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow1 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <div v-show="isShow1 == true">
          <tr>
            <td>职称名称：</td>
            <td>
              <el-input v-model="name"></el-input>
            </td>

            <td>
              <el-button type="primary" @click="GetBuildingTitleAll"
                >查询</el-button
              >
            </td>
            <td>
              <el-button type="primary" @click="OpenAdd">添加</el-button>
            </td>
            <td>
              <el-button type="primary" @click="BuildingTitlePoDelete"
                >删除</el-button
              >
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >职称信息</el-button
          >
          <el-button
            @click="isShow2 = !isShow2"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow2 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <div v-show="isShow2 == true">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            ref="multipleTable"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="building_title_id" label="编号" width="180">
            </el-table-column>
            <el-table-column
              prop="building_title_name"
              label="职称名称"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="output_value_proportion" label="产值比例">
            </el-table-column>
            <el-table-column prop="title_sort" label=""
              >职称排序
            </el-table-column>
            <el-table-column prop="title_description" label="职称描述">
            </el-table-column>
            <el-table-column label="编辑">
              <template slot-scope="scope">
                <el-button
                  @click="BuildingTitleEdit(scope.row.building_title_id)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <div v-show="isShowEdit == true">
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text">{{
            isAdd == true ? "职称添加" : "职称编辑"
          }}</el-button>
          <el-button
            @click="isShow3 = !isShow3"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow3 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <el-col :push="8">
          <div v-show="isShow3 == true">
            <el-form
              style="float: left"
              ref="form"
              :model="form"
              label-width="80px"
            >
              <el-form-item label="ID" v-show="isAdd == false">
                <el-input v-model="form.building_title_id" disabled></el-input>
              </el-form-item>
              <el-form-item label="职称名称">
                <el-input v-model="form.building_title_name"></el-input>
              </el-form-item>
              <el-form-item label="产值比例">
                <el-input v-model="form.output_value_proportion"></el-input>
              </el-form-item>
              <el-form-item label="职称排序">
                <el-select v-model="form.title_sort" placeholder="请选择">
                  <el-option :key="1" :label="1" :value="1"> </el-option>
                   <el-option :key="2" :label="2" :value="2"> </el-option>
                    <el-option :key="3" :label="3" :value="3"> </el-option>
                     <el-option :key="4" :label="4" :value="4"> </el-option>
                      <el-option :key="5" :label="5" :value="5"> </el-option>
                       <el-option :key="6" :label="6" :value="6"> </el-option>
                        <el-option :key="7" :label="7" :value="7"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="职称描述">
                <el-input v-model="form.title_description"></el-input>
              </el-form-item>
              <el-button
                type="success"
                @click="
                  isAdd == true ? BuildingTitleAdd() : BuildingTitlePoUpdate()
                "
                >保存</el-button
              >
              <el-button @click="isShowEdit = false">取消</el-button>
            </el-form>
          </div>
        </el-col>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  BuildingTitlePoDelete,
  GetBuildingTitleAll,
  BuildingTitleEdit,
  BuildingTitleAdd,
  BuildingTitlePoUpdate,
} from "./building_titleApi";
export default {
  data() {
    return {
      tableData: [],
      options: [],
      isShow1: true,
      isShow2: true,
      isShow3: true,
      isAdd: true,
      isShowEdit: false,
      name: null,
      form: {
        building_title_id: 0,
        building_title_name: null,
        output_value_proportion: null,
        title_sort: null,
        title_description: null,
      },
    };
  },
  created() {
    this.GetBuildingTitleAll();
  },
  methods: {
    GetBuildingTitleAll() {
      GetBuildingTitleAll(this.name).then((res) => {
        this.tableData = res.data;
      });
    },
    OpenAdd() {
      this.isShowEdit = true;
      this.isAdd = true;
      this.isShow3 = true;
      this.form.building_title_id = 0;
      this.form.title_description = null;
      this.form.building_title_name = null;
      this.form.title_sort = null;
      this.form.output_value_proportion = null;
    },
    BuildingTitleAdd() {
      BuildingTitleAdd(this.form).then((res) => {
        if (res.data > 0) {
          alert("添加成功");
          this.isShowEdit = false;
          this.GetBuildingTitleAll();
        }
      });
    },
    BuildingTitlePoDelete() {
      var arr = this.$refs.multipleTable.selection;
      if (arr.length == 0) {
        this.$message("至少选中一条数据");
        return;
      }
      var ids = new Array();
      arr.forEach((r) => {
        ids.push(r.building_title_id);
      });
      BuildingTitlePoDelete(ids).then((res) => {
        if (res.data > 0) {
          alert("删除成功");
          this.GetBuildingTitleAll();
        }
      });
    },
    BuildingTitleEdit(id) {
      this.isShowEdit = true;
      this.isAdd = false;
      this.isShow3 = true;
      BuildingTitleEdit(id).then((res) => {
        this.form = res.data;
      });
    },
    BuildingTitlePoUpdate() {
      BuildingTitlePoUpdate(this.form).then((res) => {
        if (res.data > 0) {
          alert("修改成功");
          this.isShowEdit = false;
          this.GetBuildingTitleAll();
        }
      });
    },
  },
};
</script>